<template>
	<div>

		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="item in newslist.message" :key="item.id">
				<router-link :to="'/home/newsinfo/' + item.id">
					<img class="mui-media-object mui-pull-left" :src="item.img_url">
					<div class="mui-media-body">
						<h1>{{ item.title }}</h1>
						<p class='mui-ellipsis'>
							<span>发表时间：{{ item.add_time | dateFormat }}</span>
							<span>点击：{{item.click}}次</span>
						</p>
					</div>
				</router-link>
			</li>

		</ul>

	</div>
</template>
<script>
	import {
		Toast
	} from "mint-ui";

	export default {
		data() {
			return {
				newslist: {
					"status": 0,
					"message": [{
							"id": 123,
							"title": "你是我的眼",
							"add_time": "2012-12-12 12:12:12",
							"zhaiyao": "",
							"click": 1,
							"img_url": "https://jingyan.baidu.com/event/img/xiangqigyefada.jpg"
						},
						{
							"id": 124,
							"title": "你是我的眼",
							"add_time": "",
							"zhaiyao": "",
							"click": 1,
							"img_url": "https://jingyan.baidu.com/event/img/xiangqigyefada.jpg"
						}
					]
				} // 新闻列表
			};
		},
		created() {
			//  this.getNewsList();
		},
		methods: {
			getNewsList() {
				// 获取新闻列表
				this.$http.get("api/getnewslist").then(result => {
					if (result.body.status === 0) {
						// 如果没有失败，应该把数据保存到 data 上
						this.newslist = result.body.message;
					} else {
						Toast("获取新闻列表失败！");
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.mui-table-view {
		li {
			h1 {
				font-size: 14px;
			}

			.mui-ellipsis {
				font-size: 12px;
				color: #226aff;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
